<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>snapshot - cloudbase examples</title>
    <link rel="stylesheet" href="https://go.tcloudbaseapp.com/vendors/bootstrap-4.5.2/bootstrap.min.css">
  </head>
  <body>
    <div class="container">
      <form action="javascript:;" onsubmit="goSnapshot(this)">
        <fieldset>
          <legend>
            <p>
            实时将任意网页在线转成 pdf，图片或者 
                <a href="https://justan.github.io/tableimage/">table</a>
            </p>
            <p>
              可以使用云开发将功能一键发布到云端
            </p>
            <p>
              <a href="https://console.cloud.tencent.com/tcb/env/index?action=CreateAndDeployCloudBaseProject&appUrl=https%3A%2F%2Fgithub.com%2FTencentCloudBase%2FCloudbase-Examples&workDir=web%2Fsnapshots&appName=snapshots" target="_blank"><img src="https://main.qcloudimg.com/raw/67f5a389f1ac6f3b4d04c7256438e44f.svg"/></a>
            </p>
          </legend>
          <p class="form-group">
            <label for="url">网站地址</label>
            <input value="https://cloudbase.net/" type="url" required name="url" id="url" placeholder="能被公开访问的网址" class="form-control"  />
          </p>
          <p class="form-group">
            <label for="type">需要转换的类型</label>
            <select name="type" id="type" class="form-control" >
              <option value="pdf">pdf</option>
              <option value="png">png</option>
              <option value="jpg">jpg</option>
              <option value="table">table</option>
            </select>
          </p>
          <p class="form-group">
              <label for="width">页面宽度</label>
              <input value="1280" placeholder="设置被转换页面的宽度" type="number" name="width" id="width" class="form-control"  />
          </p>
          <p class="form-group">
            <button name="submit" type="submit" class="btn btn-primary">预览</button>
            <span id="loading" hidden>loading...</span>
          </p>
        </fieldset>
      </form>

      <div>
        <img id="image_preview" crossorigin="anonymous" hidden src="" alt="img" />
        <iframe
          width="100%"
          style="min-height: 600px"
          id="pdf_preview"
          src=""
          hidden
          frameborder="0"
        ></iframe>
        <div id="table_preview" hidden></div>
      </div>
      <p style="text-align:center">
        Powered by <a href="https://cloudbase.net">Cloudbase</a>
      </p>
    </div>
    <script>
      function goSnapshot(form) {
        let url = form.url.value
        let type = form.type.value
        let width = form.width.value || 1280

        let showEl, hideEl
        let isTable = false
        switch (type) {
          case 'pdf':
            showEl = pdf_preview
            hideEl = image_preview
            break
          case 'table':
            type = 'png'
            isTable = true
          default:
            showEl = image_preview
            hideEl = pdf_preview
            break
        }

        let src = '<%= path ? path : ("//" + envId + ".service.tcloudbase.com/snapshots")%>?width=' + width + '&url=' + encodeURIComponent(url) + '&type=' + type

        showEl.src = src
        showEl.hidden = false
        hideEl.hidden = true

        table_preview.hidden = true

        // experience
        form.submit.disabled = true
        loading.hidden = false
        showEl.onload = showEl.onerror = () => { 
          loading.hidden = true
          form.submit.disabled = false

          if(isTable) {
            image_preview.hidden = true
            let tableHtmlStr = tableImage.convert(image_preview, {
              maxHeight: 1000,
              maxWidth: 1000 // 设置最大尺寸防止浏览器卡死
            })
            table_preview.innerHTML = tableHtmlStr
            table_preview.hidden = false
          }
        }
      }
    </script>
    <script src="https://go.tcloudbaseapp.com/vendors/tableimage.js"></script>
  </body>
</html>
